<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组织数据管理 - Supabase</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/data-management.css">
</head>
<body>
<div class="container">
    <div class="card">
        <div class="header">
            <h1>组织数据管理</h1>
            <p>管理内容分类数据</p>
        </div>
        <!-- 用户信息显示 -->
        <div id="user-info" class="user-info">
            <div class="user-header">
                <div class="avatar" id="user-avatar">U</div>
                <div class="user-details">
                    <h2 id="user-display-name">用户</h2>
                    <p id="user-email">user@example.com</p>
                </div>
                <div class="user-actions">
                   <!-- <button onclick="window.location.href='hc_dnodes.html'" class="btn btn-primary">组织管理</button>
                    <button onclick="window.location.href='hc_dnode_members.html'" class="btn btn-outline">人员分配</button>-->
                    <button id="logout-btn" class="btn logout-btn">退出登录</button>
                </div>
            </div>
        </div>
        <!-- 数据管理操作 -->
        <div class="form-container">
            <!-- 快速操作 -->
            <div class="quick-actions">
                <button id="add-data-btn" class="btn btn-primary">
                    <span class="icon">+</span> 添加组织
                </button>
                <button id="refresh-btn" class="btn btn-secondary">
                    <span class="icon">↻</span> 刷新
                </button>
                <div class="stats">
                    <span id="data-count">0</span> 条数据
                </div>
            </div>

            <!-- 搜索筛选 -->
            <div class="search-filters">
                <div class="filter-group">
                    <input type="text" id="seach-name" placeholder="搜索组织名称..." class="search-input">
                    <button id="search-btn" class="btn">搜索</button>
                    <button id="clear-search" class="btn btn-outline">清除</button>
                </div>
            </div>

            <!-- 数据表格 -->
            <div class="data-table-container">
                <div id="loading-indicator" class="loading-indicator">
                    <div class="loading-spinner"></div>
                    <p>加载用户数据中...</p>
                </div>

                <div id="no-data-message" class="no-data-message hidden">
                    <div class="empty-state">
                        <h3>暂无数据</h3>
                        <p>点击"添加数据"按钮创建您的第一条数据</p>
                    </div>
                </div>

                <table id="user-data-table" class="data-table hidden">
                    <thead>
                    <tr>
                        <th class="hidden">ID</th>
                        <th>组织名称</th>
                        <th>类型</th>
                        <th>数据</th>
                        <th>状态</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody id="user-data-tbody">
                    <!-- 数据行动态生成 -->
                    </tbody>
                </table>
            </div>

            <!-- 分页 -->
            <div class="pagination hidden" id="pagination">
                <button id="prev-page" class="btn btn-outline">上一页</button>
                <span id="page-info">第 1 页</span>
                <button id="next-page" class="btn btn-outline">下一页</button>
            </div>
        </div>

        <!-- 消息提示 -->
        <div id="message" class="message"></div>
    </div>
</div>

<!-- 添加/编辑数据模态框 -->
<div id="data-modal" class="modal hidden">
    <div class="modal-content">
        <div class="modal-header">
            <h3 id="modal-title">添加组织数据</h3>
            <button id="close-modal" class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
            <form id="data-form">
                <input type="hidden"  id="uu-id">

                <div class="form-group">
                    <label for="parent-id">父节点</label>
                    <select id="parent-id" class="filter-select" style="width: 100%;">
                        <option value="">请选择</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="name">组织机构名称</label>
                    <input type="text" id="name" placeholder="请输入组织机构名称" maxlength="18">
                </div>
                <div class="form-group">
                    <label for="type">机构类型</label>
                    <select id="type" class="filter-select" style="width: 100%;">
                        <option value="">所有状态</option>
                        <option value="organization">组织</option>
                        <option value="team">团队</option>
                        <option value="department">部门</option>
                        <option value="project">项目</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="slug">节点唯一标识符</label>
                    <input type="text" id="slug" placeholder="节点唯一标识符" maxlength="18">
                </div>
                <div class="form-group">
                    <label for="metadata">数据 (JSON格式)</label>
                    <textarea id="metadata" rows="6" placeholder='{}'></textarea>
                    <div class="form-hint">请输入有效的 JSON 格式数据</div>
                </div>
                <div class="form-group checkbox-group">
                    <input type="checkbox" id="is-active" checked>
                    <label for="is-active">激活状态</label>
                </div>
                <div class="form-actions">
                    <button type="button" id="cancel-btn" class="btn btn-outline">取消</button>
                    <button type="submit" id="save-data-btn" class="btn btn-primary">保存数据</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- 确认删除模态框 -->
<div id="delete-modal" class="modal hidden">
    <div class="modal-content">
        <div class="modal-header">
            <h3>确认删除</h3>
            <button id="close-delete-modal" class="close-btn">&times;</button>
        </div>
        <div class="modal-body">
            <p>确定要删除这条数据吗？此操作不可恢复。</p>
            <input type="hidden" id="delete-data-id">
            <div class="form-actions">
                <button id="cancel-delete" class="btn btn-outline">取消</button>
                <button id="confirm-delete" class="btn btn-danger">确认删除</button>
            </div>
        </div>
    </div>
</div>


<script src="../supabase-js/supabase.js"></script>
<script src="../js/supabase-config.js"></script>
<script src="../js/common.js"></script>
<script src="hc_dnodes.js"></script>
<script>
    // 初始化用户数据管理页面
    document.addEventListener('DOMContentLoaded', function() {
        initUserDataPage();
    });
</script>
</body>
</html>